<script setup lang="ts">
import { computed, reactive, ref, shallowRef, watch } from 'vue';
import { $t } from '@/locales';
import { fetchGetMenuTree, fetchGetRoleInfo, fetchUpdateRoleMenus } from '@/service/api';
import { useCopyProperties } from '@/hooks/common/form';

defineOptions({
  name: 'MenuAuthModal'
});

interface Props {
  /** the roleId */
  roleId: number;
}

const props = defineProps<Props>();

const visible = defineModel<boolean>('visible', {
  default: false
});

function closeModal() {
  visible.value = false;
}

type Model = Pick<Api.System.Role, 'id' | 'home' | 'menuIds'>;

const model: Model = reactive({
  id: null,
  home: 'home',
  menuIds: []
});

// 获取角色信息
async function getRoleInfo() {
  const { error, data } = await fetchGetRoleInfo(props.roleId);
  if (!error) {
    Object.assign(model, useCopyProperties(data, 'id', 'home', 'menuIds'));
  }
}

const title = computed(() => $t('common.edit') + $t('page.manage.role.menuAuth'));

// 获取所有页面列表
const pageSelectOptions = computed(() => {
  // const opts: CommonType.Option[] = pages.value.map(page => ({
  //   label: page,
  //   value: page
  // }));

  // return opts;

  return [
    {
      label: '首页',
      value: 'home'
    }
  ];
});

// 获取菜单树
const tree = shallowRef<Api.System.MenuTree[]>([]);
async function getTree() {
  const { error, data } = await fetchGetMenuTree();

  if (!error) {
    tree.value = data;
  }
}

const indeterminateKeys = ref<number[]>([]);

async function handleSubmit() {
  // 半选择的也需要
  model.menuIds = model.menuIds?.concat(indeterminateKeys.value);

  const { error } = await fetchUpdateRoleMenus(model as Api.System.RoleEditModel);
  // request
  if (!error) {
    window.$message?.success?.($t('common.modifySuccess'));

    closeModal();
  }
}

// 初始化
function init() {
  getTree();
  // 获取基本信息
  getRoleInfo();
}

watch(visible, val => {
  if (val) {
    init();
  }
});
</script>

<template>
  <NModal v-model:show="visible" :title="title" preset="card" class="w-480px">
    <NForm :model="model" label-placement="left" label-width="auto">
      <NFormItem label="进入首页" path="status">
        <NSelect v-model:value="model.home" :options="pageSelectOptions" placeholder="请选择系统首页" />
      </NFormItem>
      <NFormItem label="菜单权限">
        <NTree
          v-model:checked-keys="model.menuIds"
          v-model:indeterminate-keys="indeterminateKeys"
          :data="tree"
          key-field="id"
          checkable
          cascade
          expand-on-click
          virtual-scroll
          block-line
          class="h-280px"
        />
      </NFormItem>
    </NForm>
    <template #footer>
      <NSpace justify="end">
        <NButton size="small" class="mt-16px" @click="closeModal">
          {{ $t('common.cancel') }}
        </NButton>
        <NButton type="primary" size="small" class="mt-16px" @click="handleSubmit">
          {{ $t('common.confirm') }}
        </NButton>
      </NSpace>
    </template>
  </NModal>
</template>

<style scoped></style>
